<template>
  <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="main-info">
      <!-- 侧边导航 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="(item, index) in goodArr"
          :key="item.name"
          :title="item.name"
          @click="handleScroll(index)"
        />
      </van-sidebar>
      <!-- 右侧内容 -->
      <div class="right-info">
        <van-index-anchor v-for="item in goodArr" :key="item.name">
          <span class="title">{{ item.name }}</span>
          <van-card
            v-for="v in item.foods"
            :key="v.id"
            :price="v.price"
            :title="v.name"
            :thumb="v.imgUrl"
          >
            <template #tags>
              <p class="desc">{{ v.goodsDesc }}</p>
              <div class="evaluate">
                <span class="sales">月售{{ v.sellCount }}份</span>
                <span class="feedback-rate">好评率{{ v.rating }}%</span>
              </div>
            </template>
            <template #footer>
              <van-stepper
                v-model="v.value"
                theme="round"
                button-size="18"
                min="0"
                disable-input
                :show-minus="v.value <= 0 ? false : true"
                :show-input="v.value <= 0 ? false : true"
                @plus="add(v.price)"
                @minus="minus(v.price)"
              />
            </template>
          </van-card>
        </van-index-anchor>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
import { goods } from '../../api/goods'
// import { Toast } from 'vant'
export default {
  data() {
    return {
      // 下拉刷新
      isLoading: false,
      // 侧边导航
      activeKey: 0,
      // 商品
      goodArr: [],
      indexList: [],
      // 标杆
      flag: true
    }
  },
  created() {
    this.getGoods()
  },
  mounted() {
    document.querySelector('.right-info').style.height = document.querySelector(
      '.van-sidebar'
    ).style.height =
      document.querySelector('.van-pull-refresh').scrollHeight + 'px'
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功')
        // this.getGoods()
        this.isLoading = false
        window.location.reload()
      }, 1000)
    },
    // 获取商品
    async getGoods() {
      const { data } = await goods()
      this.goodArr = data.goodsList
      this.goodArr.forEach(item => {
        item.foods.forEach(v => {
          this.$set(v, 'value', 0)
        })
      })
      this.$nextTick(() => {
        // 获取侧边导航数组
        this.sidebarArr = document.querySelectorAll('.van-sidebar-item')
        const sidebarArr = this.sidebarArr
        // 获取右边标题数组
        this.titleArr = document.querySelectorAll('.title')
        const titleArr = this.titleArr
        // 获取右边主体元素
        this.rightInfo = document.querySelector('.right-info')
        const rightInfo = this.rightInfo
        // 滚动事件
        rightInfo.ontouchmove = () => {
          this.flag = false
          titleArr.forEach((v, k) => {
            if (v.offsetTop <= rightInfo.scrollTop) {
              sidebarArr[k].click()
            }
          })
          this.flag = true
        }
      })
    },
    // 侧边导航点击事件
    handleScroll(index) {
      // this.rightInfo.onscroll = function() {
      //   console.log(this)
      // }
      if (this.flag) {
        this.timer = setInterval(() => {
          const titleTop = this.titleArr[index].offsetTop
          const rightInfoTop = this.rightInfo.scrollTop
          this.rightInfo.scrollTop = rightInfoTop + 150
          if (rightInfoTop >= titleTop) {
            clearInterval(this.timer)
            this.rightInfo.scrollTop = titleTop
          }
        }, 20)
      }
      // this.rightInfo.scrollTop = this.titleArr[index].offsetTop
      // console.dir(this.titleArr[index])
    },
    // 价格变化
    add(n) {
      this.$store.dispatch('add', n)
    },
    minus(n) {
      this.$store.dispatch('minus', n)
    }
  }
}
</script>

<style lang="less" scoped>
.van-pull-refresh {
  flex: 1;
  overflow-y: auto;
  .van-sidebar {
    width: unset;
    overflow-y: auto;
    // 删除伪元素
    /deep/.van-sidebar-item::before {
      content: '';
      width: 70px;
      height: 1px;
      top: 99%;
      left: 50%;
      transform: translateX(-50%);
      background-color: #ccc;
    }
    .van-sidebar-item--select {
      background-color: #fff !important;
    }
    .van-sidebar-item {
      background-color: rgb(238, 238, 238);
      padding: 20px 5px 20px 12px;
      font-size: 12px;
    }
  }
  .main-info {
    display: flex;
    flex: 1;
    /deep/.van-index-anchor {
      display: flex;
      flex-direction: column;
      padding: 0;
      line-height: 10px;

      .title {
        background-color: rgb(238, 238, 238);
        color: #969a9e;
        border-left: 2px solid #ccc;
        padding-left: 12px;
        line-height: 26px;
      }
      .van-card {
        margin-top: 0;
        padding: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        border-bottom: 1px solid #ccc;
      }
    }
    .right-info {
      width: 100%;
      overflow-y: auto;
    }
  }
}
.van-card__title {
  color: #051121;
  font-size: 14px;
  margin-bottom: 5px;
}
.desc {
  color: #969a9e;
  line-height: 17px;
  transform-origin: left center;
  transform: scale(0.9);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-card__content {
  justify-content: unset;
  width: 150px;
  > div:first-child {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .evaluate {
      color: #969a9e;
      transform-origin: left center;
      transform: scale(0.9);
      margin: 5px 0;
    }
  }
  .van-card__bottom {
    flex: 1;
    line-height: 20px;
    .van-card__price {
      color: #f3131b;
      font-weight: 700 !important;
    }
    .van-card__origin-price {
      color: #969a9e;
      font-weight: 700;
      margin-left: 10px;
    }
  }
}
.van-card__footer {
  position: absolute;
  bottom: 14px;
  right: 14px;
}
/deep/.van-card__header {
  align-items: center;
}
/deep/.van-card__thumb {
  width: 70px;
  height: 70px;
  margin-right: 12px;
}
.feedback-rate {
  margin-left: 10px;
}
/deep/.van-stepper--round {
  .van-stepper__minus {
    color: #00a0db;
    border: 1px solid #00a0db;
  }
  .van-stepper__plus {
    color: #fff;
    background-color: #00a0db;
  }
}
</style>
